<template>
    <div class="login-page">
      <el-card>
        <template #header>黑马面经运营后台</template>
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="用户名：" prop="username">
            <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
          </el-form-item>
  
          <el-form-item label="密码：" prop="password">
            <el-input type="password" placeholder="请输入用户密码" v-model="form.password"></el-input>
          </el-form-item>
  
          <el-form-item class="tc">
            <el-button type="primary" @click="login">登 录</el-button>
            <el-button @click="reset">重 置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
 
  export default {
    name: 'login-page',
    data () {
      return {
        form:{
          username:'',
          password:''
        },
        rules:{
          username:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {max:10,min:5,message:'字符长度在5-10之间',trigger:'blur'}
          ],
          password:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            { pattern: /^\w{5,11}$/, message: '请输入 5 到 10 位的密码', trigger: ['blur', 'change'] }
          ]
        },
      }
    },
    methods: {
      login() {
        // 表单验证
        // 1、获取表单：通过表单的ref属性获取表单
        // 2、验证validate验证
        this.$refs.form.validate(async (valid)=>{
          if(valid) {
          // 通过dispatch调用vuex中的loginAction
          await this.$store.dispatch('users/loginAction',this.form)
           this.$router.push('/')
          }else{
            console.log('失败');
            return false
          }
        })
      },
      reset () {
        this.$refs.form.resetFields()
      }
    }
  }
  </script>
  <!--  -->
  <!-- justify-content: space-around; -->
  <style lang="scss" scoped>
  .login-page {
    min-height: 80vh;
    display: flex;
    align-items:center;
    justify-content:space-around;
    .el-card {
      width: 420px;
      ::v-deep .el-card__header{
        height: 80px;
        background: rgba(114,124,245,1);
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
      }
    }
    .el-form {
      padding: 0 20px;
    }
    .tc {
      text-align: center;
    }
  }
  </style>